<template>
  <div>
    <div class="item">
      <div class="header">
        <span>描述</span>
      </div>
      <div class="content">
        <a-input
          v-model:value="props.nodeData.properties.remarks"
          :rows="3"
          placeholder="请输入描述"
          style="width: 100%"
       
        />
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>输入变量</span>
      </div>
      <div class="content">
        <div class="var-item" v-for="(item, index) in inputParams" :key="index">
          <div class="name">
            <a-input v-model:value="item.name"  placeholder="请输入变量名" />
          </div>
          <div class="field">
            <a-select style="width: 100%" v-model:value="item.id" placeholder="请选择输入字段" @change="handleFieldChange">
              <a-select-option v-for="preItem in prevVariables" :key="preItem.id" :value="preItem.id">
                {{ preItem.nodeName }}/{{ preItem.name }}
              </a-select-option>
            </a-select>
          </div>
          <div class="action">
            <DeleteOutlined @click="deleteItem(index)" />
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <a-button type="link" @click="addItem">+ 添加变量</a-button>
    </div>

    <div class="item">
    <div class="header">
        <span>增强类型</span>
      </div>
      <div class="content">
          <a-radio-group v-model:value="props.nodeData.properties.options.enhance.type" button-style="solid">
            <a-radio-button value="class">类路径</a-radio-button>
            <a-radio-button value="spring">Spring Bean</a-radio-button>
          </a-radio-group>
      </div>
      
    </div>
    <div class="item">
      <div class="content">
        <a-input v-model:value="props.nodeData.properties.options.enhance.path" :rows="6" :placeholder="props.nodeData.properties.options.enhance.type=='class'?'请输入类路径':'请输入Spring Bean名称'" style="width: 100%" />
      </div>
      <div style="color:#aaa;">需要实现 IAiRagEnhanceJava 接口</div>
    </div>
    <div class="item">
      <div class="header">
        <span>输出变量</span>
      </div>
      <div class="content">
        <div
          v-for="(item, index) in props.nodeData.properties.outputParams"
          :key="index"
          class="field-item"
          :style="{ cursor: item.field === 'history' ? 'default' : 'pointer' }">
          <div class="name"  @click="item.field === 'history' ? undefined : handleField(item)">
            <a-space>
              <span style="color: #ff4d4f" v-if="item.required === true">*</span>
              <span v-else>&nbsp;</span>
              <span>{{ item.field }}</span>
              <span style="color: rgb(153, 153, 153)">{{ item.name }}</span>
            </a-space>
          </div>
          <div class="action">
            <DeleteOutlined v-if="item.field !== 'history' && item.field !== 'content'" class="icon" @click="handleDeleteField(index)" />
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <a-button type="primary" @click="handleAddField" style="width: 100%">添加变量</a-button>
    </div>
    <a-modal v-model:visible="fieldVisible" title="添加变量" @ok="handleFieldOk">
      <a-form :model="formFiled" name="basic">
        <a-form-item
          label="变量名称"
          name="field"
          :disabled="formFiled.field === 'content' ? true : false"
          :rules="[{ required: true, message: '请输入字段名称!' }]"
        >
          <a-input v-model:value="formFiled.field" placeholder="请输入字段名称" />
        </a-form-item>
        <a-form-item label="显示名称" name="name" :rules="[{ required: true, message: '请输入显示名称!' }]">
          <a-input v-model:value="formFiled.name" placeholder="请输入显示名称" />
        </a-form-item>
        <a-form-item label="变量类型" name="type">
          <a-select v-model:value="formFiled.type" style="width: 100%" >
            <a-select-option value="string">文本</a-select-option>
            <a-select-option value="number">数字</a-select-option>
            <a-select-option value="object">对象</a-select-option>
            <a-select-option value="string[]">文本数组</a-select-option>
            <a-select-option value="number[]">数字数组</a-select-option>
            <a-select-option value="object[]">对象数组</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch, computed } from 'vue';
import { getPreNodes } from '../../../../utils/flowNodeUtils';
const props = defineProps({
  nodeData: Object,
  lf: Object || String
});

const prevNodes = ref([]);
const prevVariables = computed(() => {
  if (prevNodes.value.length === 0) return [];

  return prevNodes.value.flatMap(prevNode => {
    // 开始节点使用inputParams，其他节点使用outputParams
    const params = prevNode.type === 'start' ? prevNode.properties.inputParams : prevNode.properties.outputParams;

    var dd =
      Array.isArray(params) && params.length > 0
        ? params.map(param => ({
            nodeId: prevNode.id,
            nodeName: prevNode.properties.text,
            field: param.field,
            name: param.name,
            type: param.type,
            id: prevNode.id + '_' + param.field
          }))
        : [];
    console.log(dd);
    return dd;
  });
});

watch(
  () => props.nodeData,
  nodeDataChange => {
    console.log('nodeDataChange');
    var nodes = getPreNodes(props.nodeData, props.lf.graphModel);
    prevNodes.value = nodes;
    console.log(nodes);
  },
  {
    immediate: true
  }
);

const handleFieldChange = value => {
  setProperties();
};

const inputParams = computed(() => {
  props.nodeData.properties.inputParams.forEach(item => {
    if (item.nodeId) {
      item.id = item.nodeId + '_' + item.field;
    }
  });
  return props.nodeData.properties.inputParams;
});

const addItem = () => {
  props.nodeData.properties.inputParams.push({});
};
const deleteItem = index => {
  props.nodeData.properties.inputParams.splice(index, 1);
  setProperties();
};
const formFiled = reactive({
  field: '',
  name: '',
  type: 'string',
  required: false
});
var currentItem = reactive(null);
const filedUpdate = ref(false);
const fieldVisible = ref(false);
const handleFieldOk = () => {
  fieldVisible.value = false;
  if (filedUpdate.value == true) {
    currentItem.field = formFiled.field;
    currentItem.name = formFiled.name;
    currentItem.type = formFiled.type;
    currentItem.required = formFiled.required;
  } else {
    props.nodeData.properties.outputParams.push({
      field: formFiled.field,
      name: formFiled.name,
      type: formFiled.type,
      required: formFiled.required
    });
  }
  setProperties();
};
const handleAddField = () => {
  fieldVisible.value = true;
  filedUpdate.value = false;
  formFiled.field = '';
  formFiled.name = '';
  formFiled.type = 'string';
  formFiled.required = false;
};
const handleDeleteField = (index) => {
  props.nodeData.properties.outputParams.splice(index, 1);

};
const handleField = item => {
    currentItem=item;
  formFiled.field = item.field;
  formFiled.name = item.name;
  formFiled.type = item.type;
  formFiled.required = item.required;
  fieldVisible.value = true;
  filedUpdate.value = true;
};
const setProperties = () => {
  props.nodeData.properties.inputParams.forEach(item => {
    if (item.id) {
      var items = item.id.split('_');
      item.field = items[1];
      item.nodeId = items[0];
    }
  });
  props.lf.setProperties(props.nodeData.id, props.nodeData.properties);
};
watch(
  () => props.nodeData.properties,
  dataChange => {
   setProperties();
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang='less' scoped>
.item {
  padding-top: 4px;
  padding-bottom: 4px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 2px;
  }
  .content {
    background-color: #fff;
  }
}

.case-item {
  margin-bottom: 8px;
  position: relative;
}

.case-item .case-header {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 11px;
  height: 30px;
  border-radius: 3px 0 0;
  background-color: #fff;
  z-index: 2;
  pointer-events: none;
  padding: 2px 11px;
  display: flex;
  justify-content: space-between;
}

.case-item .case-header .case-label {
  color: #999;
}

.case-item .case-header .case-action .app-iconify {
  cursor: pointer;
  pointer-events: auto;
}

.case-item .case-header .case-action .delete {
  transition: color 0.15s;
}

.case-item .case-header .case-action .delete:hover {
  color: #ff4d4f;
}

.case-item .case-input {
  padding-top: 32px;
}
.ai-label {
  color: rgb(170, 170, 170);
  font-size: 14px;
}

.var-item {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-start;
}

.var-item > div {
  margin-right: 10px;
}

.var-item > div:last-child {
  margin-right: 0;
}

.var-item > div.name,
.var-item > div.field {
  flex: 1;
}

.var-item > div.name .ant-input-disabled {
  color: #333 !important;
  cursor: default !important;
}

.var-item > div.action {
  margin-right: 0;
  text-align: center;
  width: 32px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}

.var-item > div.action:hover {
  background-color: #f5f5f5;
}

.var-item > div > p {
  color: #e00;
  margin-top: 2px;
  margin-bottom: 0;
}
.field-item {
  margin-bottom: 8px;
  width: 100%;
  height: 32px;
  background-color: #f9f9f9;
  padding: 8px 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.field-item .icon {
  width: 22px;
  line-height: 1;
}
.field-item .name {
  flex: 1;
}
.field-item .action {
  width: 40px;
  text-align: right;
}
.field-item .action .icon:hover {
  color: red;
}
</style>